import { useState } from "react";
import clsx from "clsx";
import styles from "./style.module.css";
const Tab = ({ tabs, onTabClick }) => {
  const [selected, setSelected] = useState("today");
  return (
    <div className="flex items-center justify-between gap-x-[12px] px-[24px] relative">
      {tabs.map((tab) => (
        <span
          className={clsx("w-[84px]", styles.tab, {
            [styles.tabActive]: tab.key === selected,
          })}
          onClick={() => {
            setSelected(tab.key);
            onTabClick(tab.key);
          }}
          key={tab.key}
        >
          {tab.text}
        </span>
      ))}
    </div>
  );
};

export default Tab;
